import React, { Component } from 'react'
import { Card,Button,List, message,Image } from 'antd'
import { ArrowLeftOutlined, } from '@ant-design/icons';
import { connect } from 'react-redux';
import { reqSearchTeacherById} from '../../api'
import { saveTeacherAction } from '../../redux/action_creators/user_action';
import { IMAGE_URL } from '../../config';
import dayjs from 'dayjs';


const { Item } =List;

@connect(
    state=>({
        userList:state.userList
    }),
    {
        saveTeacherList:saveTeacherAction
    }
)
 class Detail extends Component {
     state = {
         id:'',
         userNum:'',
         img:'-1',
         degree:'',
         detail:'',
         username:'',
         title:'',
         createTime:'',
         phone:'',
         email:'',
         isLoading:true
     }
     componentDidMount(){
         //从redux中获取
         const {teacherList } = this.props.userList;
        const {id } = this.props.match.params;
       
        if(teacherList.length){
            let teacherDetail = teacherList.find((item)=>item.id === parseInt(id))
            this.setState({
                ...teacherDetail,
                isLoading:false,
            })
        }else{
            this.getTeacherById(id)
        }
     }
     getTeacherById = async (teacherId) =>{
         let result = await reqSearchTeacherById(teacherId);
         const {code,msg,data } = result;
         console.log(data);
         console.log(data);
         if(code === 200){
              this.setState({...data,isLoading:false})
        }else   message.error(msg,1)
     }

    render() {
        const  { username,userNum,degree,title,phone,img,detail,email,createTime,isLoading} = this.state
        return (
            <div  style={{minWidth:"950px"}}>
                <Card 
                    title={
                        <div className="left-top">
                            <Button 
                                type="link" 
                                size="small"
                                onClick={()=>{this.props.history.goBack()}} 
                            >
                                <ArrowLeftOutlined className="iconSize"/>
                            </Button>
                            <span>讲师信息详情</span>
                        </div>
                    }
                >
                    <List 
                        loading={isLoading}
                        bordered
                        size={'small'}
                       
                    >
                        <Item>
                            <div><span className="product-name">姓名：</span><span>{username}</span></div>
                        </Item>
                        <Item>
                            <div><span className="product-name">工号：</span><span>{userNum}</span></div>
                        </Item>
                        <Item>
                            <div><span className="product-name">学位：</span><span>{degree}</span></div>
                        </Item>
                        <Item>
                            <div><span className="product-name">职称：</span><span>{title}</span></div>
                        </Item>
                        <Item>
                            <div><span className="product-name">电话：</span><span>{phone}</span></div>
                        </Item>
                        <Item>
                            <div><span className="product-name">邮箱：</span><span>{email}</span></div>
                        </Item>
                        <Item>
                            <div><span className="product-name">加入时间：</span><span>{dayjs(createTime).format('YYYY年MM月DD日')}</span></div>
                        </Item>
                        <Item >
                            <div>
                                <span className="product-name" >个人描述：</span>
                                <div   dangerouslySetInnerHTML={{__html:detail}}></div>
                            </div>
                        </Item>
                        <Item >
                            <div> 
                                <span className="product-name">个人照片：</span> 
                              <span>{img==='-1'||img===null?'':<Image  width={200} src={IMAGE_URL+img} />}</span> 
                            </div>
                        </Item>
                        
                    </List>
                </Card>
            </div>
        )
    }
}
export default Detail;